<template>
  <div>
    <div class="page-header col-xs-offset-2 col-xs-8">
      <h2 :style="{background:$route.path=='/home'?'red':'green'}">Vue路由测试</h2>
    </div>
    <!-- 导航区域 -->
    <div class="col-xs-2 col-xs-offset-2">
      <!-- 
        声明式导航:router-link(全局组件:vue-router提供),实现路由的跳转
        声明式导航务必要有to属性，往哪里跳转
        router-link组件，它的template当中只有a标签，
        实质router-link组件其实就是a标签
       -->
      <!-- <router-link to="/about" >About</router-link>
      <router-link to="/home" class="list-group-item">Home</router-link> -->
      <JchLink :to="'/home'" :title="'home'"/>
      <JchLink :to="'/about'" :title="'about'"/>
    </div>
    <!-- 展示区 -->
    <div class="col-xs-6 panel-body">
       <!-- App根组件的显示区域:可能显示Home、About，取决于URL的K -->
       <!-- 要么显示Home路由组件|要么显示About路由组件---配路由 -->
       <!-- 需要告诉Vue框架，路由组件出口在哪里，路由组件在哪里显示！！！ -->
       <!-- router-view:vue-router提供一个全局组件,可以设置V(路由组件在哪里显示) -->
       <keep-alive :include="['About']">
           <!--keep-alive:全局组件 include属性，可以设置哪些组件可以进行缓存，哪些不缓存！！！！  -->
           <!--kee-alive:vue框架提供的一个全局组件,可以让路由组件切换的时候，路由组件步销毁！！！  -->
           <!--假如有八个路由组件:想缓存六个 [a,b,c,d]-->
           <router-view></router-view>
       </keep-alive>
    </div>
  </div>
</template>
<script>
export default {
  name: "",
  mounted(){
    //因为入口文件注入router属性，因此只要是组件，就有$route与$router属性！！！！！
    //$route属性:能看到当前路由信息【路径,路由传递参数query,params等等等】
    // console.log(this.$route);
  }
};
</script>

<style scoped>
 
</style>
